<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="box-card">
  <div slot="header" el-card__header v-if="$route.path!==$route.fullPath" >
<el-breadcrumb >
  <el-breadcrumb-item>学科管理</el-breadcrumb-item>
  <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
  <el-breadcrumb-item>标签管理</el-breadcrumb-item>
</el-breadcrumb>
  </div>
        <el-row>
          <el-col :span="18">
            <el-form ref="form" :model="form" >
              <el-form-item label="标签名称" label-width="80px">
                <el-input v-model.trim="form.tagName" @input="empty" style="width:221.4px"></el-input>
              </el-form-item>
              <el-form-item label="状态" label-width="80px">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="启用" value="1" ></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="10px">
                <el-button size="small"  @click="submitForm('ruleForm')">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
             <el-col :span="6" >
                <el-button type="success" class="back" size="small" icon="el-icon-edit" @click="add">添加标签</el-button>
               <el-button type="text" class="back" v-if="$route.path!==$route.fullPath">
               <i class="el-icon-back"></i>
              <span @click="$router.push('/subjects/list')">返回学科</span>
                </el-button>
           </el-col>
        </el-row>
        <el-alert
          type="info"
          show-icon
          :closable='false'>
     一共{{total}}条数据
        </el-alert>
        <el-table
          :data="tableData"
          row-key="id"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="顺序"
            width="80px"
          >
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
           />
          <el-table-column
            prop="tagName"
            label="标签名称"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
          >
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
          >
            <template #default='{row}'>
              {{formaTime(row.addDate)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
          >
          <template
                slot-scope="scope"
              >{{ format(scope.row.state)}}
              </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >      <template slot-scope="scope">
            <el-button type="text" @click="Disable(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
            <el-button type="text" :disabled="scope.row.state===1" @click="modify(scope.row)" >修改</el-button>
            <el-button type="text" :disabled="scope.row.state===1" @click="del(scope.row)">删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paging.page"
          :page-sizes="[5,10,20,50]"
          :page-size="paging.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total" />
      </el-card>
      <el-dialog
        :title="isEind?'新增目录':'修改目录'"
        :visible.sync="dialogVisible"
        width="30%"
        @close='close'
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <Tags ref="tags"  :tableData='tableData'  @Hupdate='Hupdate' @new='alter' @shut='shut' @off='added' @nova='Refresh' :isEind='isEind' :sj='sj' />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { status } from '../../api/hmmm/constants.js'
import Tags from '../components/tags-add'
import { list as getList, remove as Hdel, changeState } from '../../api/hmmm/tags'
const aaa = status.reduce((acc, item) => {
  return { ...acc, [item.value]: item.label }
}, {})
console.log(status)
export default {
  name: 'tags',
  components: {
    Tags
  },
  created () {
    this.$route.path !== this.$route.fullPath ? this.Jump() : this.dolist()
  },
  data () {
    return {
      sj: {},
      isEind: true,
      dialogVisible: false,
      total: null,
      form: {
        tagName: '',
        state: ''
      },
      // 分页
      paging: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      hh: ''
    }
  },
  methods: {
    // input输入框内容被删除完了
    empty () {
      if (this.form.tagName === '') {
        if (this.$route.path !== this.$route.fullPath) {
          this.Jump()
        } else {
          this.Jump({ page: 1, pagesize: 10 })
        }
      }
    },
    alter () {
      this.dialogVisible = false
      this.Jump(this.paging)
    },
    shut () {
      this.dialogVisible = false
      this.Jump()
    },
    Hupdate () {
      this.paging.page = 1
      if (this.$route.path !== this.$route.fullPath) {
        this.Jump()
      } else {
        this.dolist(this.paging)
      }
    },
    modify (gg) {
      this.sj = gg
      this.isEind = false
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.tags.form.name = gg.tagName
        this.$refs.tags.form.region = gg.subjectID
      })
    },
    async Disable (data) {
      this.sj = data
      if (!data.state) {
        data.state = 1
      } else {
        data.state = 0
      }
      await this.toggleState(data)
    },
    // 启用禁用发axios
    async toggleState (data) {
      try {
        const res = await changeState(data)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    // 启用还是禁止前端
    format (num) {
      return aaa[num]
    },
    Refresh () {
      this.dolist()
    },
    close () {
      this.$refs.tags.clear()
    },
    added () {
      this.dialogVisible = false
      this.total = this.total + 1
    },
    del (data) {
      this.$confirm('此操作将永久删除该标签,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await Hdel(data)
          console.log(res)
          this.$message.success('恭喜你删除成功')
          if (this.$route.path !== this.$route.fullPath) {
            if (this.tableData.length === 1) {
              this.paging.page--
            }
            this.dolist()
          } else {
            if (this.form.tagName !== '') {
              if (this.tableData.length === 1) {
                this.paging.page--
              }
            }
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    time (variable) {
      if (variable < 10) {
        return '0' + variable
      } else {
        return variable
      }
    },
    formaTime (time) {
      const dt = new Date(time)
      return [dt.getFullYear(), this.time(dt.getMonth() + 1), this.time(dt.getDate())].join('-') + '  ' + [this.time(dt.getHours()), this.time(dt.getMinutes()), this.time(dt.getSeconds())].join(':')
    },
    // 格式化时间
    // 获取标签的列表
    // 1
    async dolist () {
      try {
        const res = await getList(this.paging)
        console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
        this.tableData.splice(1, 0)
      } catch (err) {
        console.log(err)
      }
    },
    submitForm () {
      this.form = {}
      if (this.$route.path !== this.$route.fullPath) {
        this.Jump()
      } else {
        this.Jump()
      }
    },
    async Jump () {
      try {
        const res = await getList({ ...this.paging, subjectID: this.$route.query.id })
        this.tableData = res.data.items
        this.total = res.data.counts
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    // 用户点击搜索
    async search () {
      if (!this.form.tagName || !this.form.state) return
      this.paging.page = 1
      this.well()
    },
    async well () {
      try {
        const res = await getList({ ...this.form, ...this.paging })
        this.tableData = res.data.items
        this.total = res.data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 当前页数发生变化
    handleCurrentChange (curPage) {
      this.paging.page = curPage
      // 从学科页面跳转过来的
      if (this.$route.path !== this.$route.fullPath) {
        if (this.form.tagName !== '') {
          this.search()
        } else {
          this.Jump()
        }
        // this.subject()
      } else {
        if (this.form.tagName !== '') {
          this.search()
        } else {
          this.Jump()
        }
      }
    },
    handleSizeChange (newSize) {
      this.paging.page = 1
      this.paging.pagesize = newSize
      // 从学科页面跳转过来的
      if (this.$route.path !== this.$route.fullPath) {
        this.search()
      } else {
        this.form.tagName !== '' ? this.search() : this.Jump()
      }
    },
    add () {
      this.dialogVisible = true
      this.isEind = true
    }
  }
}
</script>
<style scoped>
.el-form{
  display: flex;
}
.el-card{
  padding: 20px;
}
.el-table{
  margin-top: 20px;
}
.el-pagination{
float: right;
}
.el-alert__content{
  margin: 0;
}
.back{
  float: right;
}

</style>
